<template>
  <div class="buylist">
    <div class="bg"></div>
    <van-nav-bar id="van-bar" :title="title" fixed :border="border" left-arrow @click-left="onClickLeft">
            <template #left>
                <img :style="{width:widthPx,height:heightPx}" src="@/assets/iconPerfectInformation/nav_back@2x.png" />
            </template>
        </van-nav-bar>
        <div  :style="'margin-top:'+topheight+'px;height:calc(100vh - '+topheight+'px);width:100%;overflow:auto;'">
          <van-cell-group>
  <van-cell
    v-for="(item, index) in list"
    :key="index"
    less-spacing
    title-style="flex: 5"
    title-class="van-multi-ellipsis--l2"
    label-class="font-size0 van-color-text-secondary"
    value-class="margin-left38 flex-align-spacebetween"
  >
    <template slot="title">
      <span class="van-multi-ellipsis--l2">{{ item.title }}</span>
    </template>
    <template slot="label">{{ item.time }}</template>
    <template>
     
      <span class="font-size2 van-color-text-assist">
        ￥{{ item.pay_price }}
        
      </span>
    </template>
  </van-cell>
</van-cell-group>
        </div>
   
  </div>
</template>

<script>
import { getViplist } from "@/api/index"

export default {
    data(){
      return{
        border:'',
        widthPx:'28px',
        heightPx:'28px',
        topheight:0,
        title:'购买记录',
        list: [
        
       
      ]
      }
    },
    mounted(){
      this.topheight=document.getElementById("van-bar").offsetHeight
      this.getList()
       
    },
    methods:{
       getList(){
        getViplist(
      ).then((res) => {
        let list=[]
         res.data.list.forEach((el) => {
          var date = new Date();
        date.setTime(el.add_time);
        var month = date.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var hours = date.getHours();
        if (hours < 10) hours = "0" + hours;
        var minutes = date.getMinutes();
        if (minutes < 10) minutes = "0" + minutes;
      
        el.time=month + "/" +
          date.getDate() + " " +
          hours +":" +
          minutes ;
         console.log(time);
        })
        this.list = list.concat(...res.data.list)
        console.log(res);
        // 加载状态结束
      
      })
    },
      onClickLeft(){
        this.$router.back()
      }
    }
}
</script>

<style scoped>
.bg{
  width: 100%;
  height: 100vh;
  position: fixed;
  background: linear-gradient(180deg, #CDE1FD 0%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  height: 148px;
  /* background: url('../../assets/myicon/bg.png') no-repeat; */

}
.buylist{
}
 .van-cell::after{
    border-color: #D8D8D8;
}
.van-cell-group,.van-cell,.van-nav-bar{
  background: transparent;
}
>>>.van-nav-bar__content{
  background: transparent !important;
}
.van-cell__value{
    color: #1A1A1A;
    font-weight: 500;
}
</style>